<template>
  <div>
    <div class="flex items-center gap-4">
      <img :src="rightIcon" class="w-6 h-5" />
      输量与油温调节
    </div>
    <div
      class="mt-4 w-[426px] h-[300px] bg_detail rounded-lg shadow flex flex-col items-center gap-8 py-8 px-4 box-border"
    >
      <div class="flex items-center w-full">
        <span class="w-[140px] text-right">输量调节时间</span>
        <el-input v-model="flowAdjustmentTime" class="!w-[160px] ml-6" />
        <span class="ml-2">小时</span>
      </div>
      <div class="flex items-center w-full">
        <span class="w-[140px] text-right">调节后的输量</span>
        <el-input v-model="adjustmentTimeFlow" class="!w-[160px] ml-6" />
        <span class="ml-2">m³/h</span>
      </div>
      <div class="flex items-center w-full">
        <span class="w-[140px] text-right">油温调节时间</span>
        <div>
          <el-input v-model="oilTemperatureAdjustmentTime" class="!w-[160px] ml-6" />
        </div>
        <span class="ml-2">小时</span>
      </div>
      <div class="flex items-center w-full">
        <span class="w-[140px] text-right">调节后的油温</span>
        <el-input v-model="adjustmentTimeOilTemperature" class="!w-[160px] ml-6" />
        <span class="ml-2">℃</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import rightIcon from '@/assets/images/rightIcon.png'
// 响应式数据
const flowAdjustmentTime = ref('5')
const adjustmentTimeFlow = ref('200')
const oilTemperatureAdjustmentTime = ref('6')
const adjustmentTimeOilTemperature = ref('20')

const validateSettings = () => {
  const adjustFields = [
    { value: flowAdjustmentTime.value, name: '输量调节时间' },
    { value: adjustmentTimeFlow.value, name: '调节后的输量' },
    { value: oilTemperatureAdjustmentTime.value, name: '油温调节时间' },
    { value: adjustmentTimeOilTemperature.value, name: '调节后的油温' }
  ]

  for (const field of adjustFields) {
    if (!field.value) {
      ElMessage.error(`${field.name}不能为空`)
      return false
    }
  }
  return true
}

const isFormValid = computed(() => {
  const adjustFields = [
    flowAdjustmentTime.value,
    adjustmentTimeFlow.value,
    oilTemperatureAdjustmentTime.value,
    adjustmentTimeOilTemperature.value
  ]
  if (!adjustFields.every((field) => field)) return false

  return true
})

const getParamsData = () => {
  return {
    SLTJ_time: flowAdjustmentTime.value,
    Q_S_TJ: adjustmentTimeFlow.value,
    WDTJ_time: oilTemperatureAdjustmentTime.value,
    T_S_TJ: adjustmentTimeOilTemperature.value
  }
}

// 暴露给父组件的方法和数据
defineExpose({
  validateSettings,
  isFormValid,
  getParamsData
})
</script>

<style scoped></style>
